<template>
	<div>
		<div class="title">完善您的信息</div>
		<div class="subtitle">以便我们为您提供更佳的服务</div>

		<div class="avatar" @click="uploadAvatar">
			<image class="image" mode="aspectFill" src="/static/avatar.png"></image>
			<image class="upload-icon" mode="aspectFit" src="/static/avator_edit.png"></image>
		</div>
		<div class="avatar-tip">点击设置头像</div>

		<div class="sexs">
			<div
				class="boy item"
				:class="[
					{
						active: formData.sex == '1',
					},
				]"
				@click="onSexChange('1')"
			>
				<image class="icon" v-show="formData.sex != '1'" mode="aspectFill" src="/static/sex-1.png"></image>
				<image class="icon" v-show="formData.sex == '1'" mode="aspectFill" src="/static/sex-1-active.png"></image>
				男士
			</div>
			<div
				class="girl item"
				:class="[
					{
						active: formData.sex == '2',
					},
				]"
				@click="onSexChange('2')"
			>
				<image class="icon" v-show="formData.sex != '2'" mode="aspectFill" src="/static/sex-2.png"></image>
				<image class="icon" v-show="formData.sex == '2'" mode="aspectFill" src="/static/sex-2-active.png"></image>
				女士
			</div>
		</div>

		<div class="form-item margin">
			<div class="label">昵称</div>
			<div class="value">
				<input v-model="formData.nickname" type="text" class="input" placeholder="请输入昵称" />
			</div>
		</div>
		<div class="form-item margin">
			<div class="label">生日</div>
			<div class="value birthday-value arrow-right">
				<picker mode="date" :value="tenYearsAgo" :end="endDate" @change="onBirthdayChange">
					{{ formData.birthday || "请选择生日" }}
				</picker>
			</div>
		</div>

		<div class="footer">
			<div class="footer-tip">我们将尊重您的隐私并严格保密</div>
			<div class="button">确定</div>
		</div>
	</div>
</template>

<script>
function makeUpZero(number) {
	return number < 10 ? "0" + number : number
}
function analyzeDate(date) {
	if (typeof date === "string") {
		date = date.replace(/-/g, "/")
	}

	const time = new Date(date)

	return {
		year: time.getFullYear(),
		month: time.getMonth() + 1,
		day: time.getDate(),
		hour: time.getHours(),
		minute: time.getMinutes(),
		second: time.getSeconds(),
		week: time.getDay(),
	}
}
function formatDate(date, fmt) {
	const { year, month, day, hour, minute, second } = analyzeDate(date)

	return fmt.replace(/YYYY|yyyy|YY|yy|MM|M|DD|dd|D|d|hh|h|HH|H|mm|m|ss|s|SS|S/g, function (a) {
		switch (a) {
			case "yy":
			case "YY":
				return (year + "").slice(2)
			case "yyyy":
			case "YYYY":
				return year
			case "M":
				return month
			case "MM":
				return makeUpZero(month, 2)
			case "d":
			case "D":
				return day
			case "dd":
			case "DD":
				return makeUpZero(day, 2)
			case "h":
			case "H":
				return hour
			case "hh":
			case "HH":
				return makeUpZero(hour, 2)
			case "m":
				return minute
			case "mm":
				return makeUpZero(minute, 2)
			case "s":
			case "S":
				return second
			case "ss":
			case "SS":
				return makeUpZero(second, 2)
		}
	})
}
function useBirthday() {
	const nowDate = new Date()
	const tenYearsAgo = new Date()
	tenYearsAgo.setFullYear(nowDate.getFullYear() - 10)

	return {
		nowDate,
		tenYearsAgo: formatDate(tenYearsAgo, "YYYY-MM-DD"),
		endDate: formatDate(nowDate, "YYYY-MM-DD"),
	}
}

export default {
	data() {
		const { tenYearsAgo, endDate } = useBirthday()

		return {
			tenYearsAgo,
			endDate,
			formData: {
				avatar: "",
				sex: "1",
				nickname: "",
				birthday: "",
			},
		}
	},
	methods: {
		uploadAvatar() {
			this.uploadFile(path => {
				console.log(path)
			})
		},
		onSexChange(sex) {
			this.formData.sex = sex
		},
		onBirthdayChange({ detail: { value } }) {
			this.formData.birthday = value + " 00:00:00"
		},
	},
}
</script>

<style lang="scss" scoped>
page {
	background: #fff;
}

.title {
	text-align: center;
	font-size: 44rpx;
	letter-spacing: 3rpx;
	padding-top: 70rpx;
	padding-bottom: 10rpx;
}
.subtitle {
	text-align: center;
	font-size: 28rpx;
	color: #999;
	padding-bottom: 70rpx;
}
.avatar {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	margin: 0 auto;
	.image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.upload-icon {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 60rpx;
		height: 60rpx;
	}
}
.avatar-tip {
	text-align: center;
	font-size: 28rpx;
	color: #999;
	padding-top: 20rpx;
	padding-bottom: 70rpx;
}
.sexs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 25rpx;
	.item {
		border: 1px solid #dfdfdf;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #777777;
		font-size: 24rpx;
		border-radius: 1000px;
		white-space: nowrap;
		gap: 5rpx;
		padding: 5rpx 25rpx;
		transition: all 0.25s;
		&.active {
			border-color: #476bff;
			color: #476bff;
			background: #ecf0ff;
		}
	}
	.icon {
		width: 50rpx;
		height: 50rpx;
	}
}

.birthday-value {
	padding-right: 20rpx;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	.footer-tip {
		text-align: center;
		font-size: 24rpx;
		color: #b4b4b4;
		padding-bottom: 20rpx;
	}
	.button {
		font-size: 28rpx;
		background: #476bff;
		width: 350rpx;
		height: 80rpx;
		margin: auto;
		border-radius: 1000px;
		margin-bottom: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
}

.form-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	.label {
		font-size: 28rpx;
		white-space: nowrap;
	}
	.value {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: relative;
		.input {
			text-align: right;
			font-size: 26rpx;
		}
		&.arrow-right {
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: 10rpx;
				height: 10rpx;
				border-right: 1px solid currentColor;
				border-top: 1px solid currentColor;
				transform: rotate(45deg);
				margin: auto;
				opacity: 0.5;
			}
		}
	}
}
.margin {
	margin-inline: 30rpx;
}
</style>
